
<template>
  <div>
    <!-- 标题 -->
    <div class="titles">
      <h2>学生账号管理</h2>
    </div>
    <!-- 功能区域 -->
    <div id="margins" class="header">
          <!-- 查询 -->
          <span id="title" class="interval" >专业：</span>
            <el-select v-model="params.majorId" placeholder="请选择专业"  >
              <el-option v-for="item in major" :Key="item.majorId" :label="item.majorName" :value="item.majorId"></el-option>
            </el-select>
      
      <span id="title" class="interval">年级：</span>
      <el-input class="inline" v-model="params.enrTime" placeholder="请输入年级（入学年份）"></el-input>
      <span id="title" class="interval">班级：</span>
      <el-input class="inline" v-model="params.stuClass" placeholder="请输入班级(阿拉伯数字)"></el-input>
      <el-button type="primary" @click="findBySearch()" size="small" class="interval">查询</el-button>
      <el-button style="margin-left:5px" type="danger" @click="reset" size="small">重置</el-button>

      <!-- 批量导入 -->
      <div style="margin-left:auto">
          <el-upload  ref="upload" action="" multiple :limit="1" :on-exceed="handleExceed" :accept="region"
            :http-request="uploadExcel">
            <el-button   size="small" type="success" @click="checkInfoData()">导入报表</el-button>
          </el-upload>
        </div>

    </div>

    <!-- 列表 --> 
    <div class="list" id="margins">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column prop="username" label="学号" align="center" width="140">
        </el-table-column>
        <el-table-column prop="nickname" label="姓名" width="100" align="center"></el-table-column> 
        <el-table-column prop="enrTime" label="年级" width="80" align="center"></el-table-column>
        <el-table-column prop="departmentName" label="学院" align="center"></el-table-column> 
        <el-table-column prop="majorName" label="专业" align="center" width="140"></el-table-column>
        <el-table-column prop="stuClass" label="班级" align="center" width="80"></el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" width="150"></el-table-column>
        <el-table-column prop="uploadFile" label="证件 " align="center" width="180" >
          <!-- 图片的显示 -->
          <template slot-scope="scope">            
            <el-image v-if="scope.row.uploadFile" style="width: 100px; height: 100px" :src="`http://localhost:8015/user/` + scope.row.uploadFile" :preview-src-list="[`http://localhost:8015/user/` + scope.row.uploadFile]" ></el-image>
            <div v-else style=" line-height: 125px;">暂无证件</div>
          </template>       
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" align="center" ></el-table-column>
        <el-table-column prop="status" label="状态 " align="center" >
          <template slot-scope="scope">
            <span v-show="scope.row.status == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
            <span v-show="scope.row.status == 1">审批中</span>
            <span v-show="scope.row.status == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="240">
          <template slot-scope="scope" >
            <el-button type="primary" @click="passAccount(scope.row.id)" size="small" :disabled="scope.row.status == 1 ? false : true">通过</el-button>
            <el-button type="danger" size="small"  @click="failAccount(scope.row.id)" :disabled="scope.row.status == 1 ? false : true">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      
      <div class="paging">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="params.pageNum" :page-sizes="[10, 15, 20]" :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    </div>
</template>

<script>
import { pagingTeacher,accountManagement } from "@/api/teacher/pupil";
import { getInfo, getMajorsByDepartmentId } from "@/api/user";
import { uploadExcel } from "@/api/excel";
export default {
  data() {
    return {
      department: [], //学院数据
      major: [], // 专业数据
      // 上传格式
      region: ".xlsx",
      departments: {}, //department表数据
      //专业下拉框
      Major:[],
      //学院下拉框
      Departments:[],
      // 分页信息
      params: {
        enrTime:'',           //年级
        stuClass:"",          //班级           
        pageNum: 1,           //当前页
        pageSize: 10,         //当前页显示条数
      },
      // 总共信息条数
      total: 0,
      // 列表
      tableData: [],
      // 注册账号审核状态
      RegistrationAudit:{},
      departmentId:null,//当前教师的学院信息
    };
  },
  created() {
    this.users();    
  },
  methods: {
   
    // 获取学院数据
    majors() {
      getMajorsByDepartmentId(this.departmentId).then(res => {
        this.major = res.data
      })
      this.major = " ";  //学院清空
    },
    // 清空文件上传列表信息
    clearFiles() {
      this.$refs.upload.clearFiles();
    },
    // 自定义上传事件
    uploadExcel(e) {
      const from = new FormData();
      from.append("file", e.file);
      uploadExcel(from).then((res) => {
        if (res.code == 200) {
          this.$message.success("批量导入成功");
          this.clearFiles();
          this.findBySearch();
        } else {
          this.$message.error("批量导入失败");
        }
      });
    },
    // 文件上传
    checkInfoData() {
      this.$refs.upload.submit();
      this.clearFiles();
    },
    // 限制上传文件数量
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 用户信息
    users() {
      getInfo().then(res => {
        this.departmentId = res.data.departmentId
        this.findBySearch();
      })
    },
    // 注册账号审核成功状态
    passAccount(id,status){
      this.RegistrationAudit.id=id;
      this.RegistrationAudit.status=status;
      this.RegistrationAudit.status=2;
      accountManagement(this.RegistrationAudit).then((res)=>{
      this.findBySearch();
      })
    },
    // 注册账号审核失败状态
    failAccount(id,status){
      this.RegistrationAudit.id=id;
      this.RegistrationAudit.status=status;
      this.RegistrationAudit.status=0;
      accountManagement(this.RegistrationAudit).then((res)=>{
      this.findBySearch();
      })
    },
    //分页查询
    findBySearch() {
      var qaer  = {
        majorId: this.params.majorId,
        departmentId:this.departmentId,
        stuClass:this.params.stuClass,
        enrTime:this.params.enrTime,
        pageNum:this.params.pageNum,
        pageSize:this.params.pageSize
      }
      pagingTeacher(qaer).then((res) => {
        if (res.code === 200) {
          console.log(res.data);
          //给列表渲染数据
          this.tableData = res.data.list;
          // 数据总条数
          this.total = res.data.total;
          this.majors();
        }
      });
    },
    handleSizeChange(pagesize) {
      this.params.pageSize = pagesize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    },
    // 清空查询
    reset() { 
      this.ruleForm ={ },
      this.params = {
        pageNum: 1,
        pageSize: 10,
      };
      this.findBySearch();
    },



  }
}
</script>

<style>
/* 上传文件按钮样式 */
.button {
  width: 100px;
  height: 40px;
  margin-left: 30px;
  margin-bottom: auto;
}
/* 分页样式 */
.paging {
  padding-top: 30px;
  text-align: right;
}
/* 搜索框样式 */
.inline {
  width: 200px;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.headerOne {
  position: absolute;
  right: 50px;
  display: flex;
}
/* 字体样式 */
.interval{
  margin-left: 10px;
}
</style>
